<template>
  <el-container>
    <el-header>
      <el-button type="primary">{{ this.$route.params.id }}</el-button>
      <el-button type="primary" @click="tijiao">提交</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-button icon="el-icon-plus" @click="addNew">新建章节</el-button>
        <ul>
          <li
            v-for="item in titles"
            :key="item._id"
            class="title"
            @click="thisTitle(item._id)"
            @dblclick="changeTitle(item._id)"
          >
            <el-tag closable @close="removeTitle(item._id)" id="isTitle" v-if="item.state == 0">{{
              item.title
            }}</el-tag>
            <el-tag closable @close="removeTitle(item._id)" id="isTitle" v-if="item.state == 1" type="danger">{{
              item.title
            }}</el-tag>
            <!-- <el-button @click="thisTitle(item._id)">{{ item.title }}</el-button> -->
          </li>
        </ul>
      </el-aside>
      <el-main>
        <!-- <el-card> -->
        <el-input
          type="textarea"
          :rows="24"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="*"
          show-word-limit
          resize="none"
        >
        </el-input>
        <!-- </el-card> -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      thisBook: {},
      titles: {},
      thisTitleId: "",
      isTrue:true,
    };
  },
  methods: {
    async getThisBook(id) {
      this.id = this.$route.params.id;
      const { data: res } = await this.$http.get(
        `books/gettitle/${this.$route.params.id}`
      );
      this.titles = res.data;
      this.bookname = res.data.bookname;
      //let id = res.data[0]._id;
      if(this.isTrue){
        this.thisTitle(res.data[0]._id);
        return
      }else{
        this.thisTitle(id);
        return
      }
      //id = ""
    },
    addNew() {
      this.$prompt("请输入章节名", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.newa(value);
          this.$message({
            type: "success",
            message: "创建成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    async thisTitle(id) {
      //console.log(a);
      const { data: res } = await this.$http.get(`books/getcontent/${id}`);
      //console.log(res);
      this.textarea = res.data.content;
      this.thisTitleId = res.data._id;
    },
    async newa(value) {
      const { data: res } = await this.$http.post(
        `books/addcontent/${this.$route.params.id}`,
        {
          title: value,
        }
      );
      if (res.status == 200) {
        this.isTrue = false;
        this.getThisBook(res.data._id);
        // console.log(res.data._id);
        // this.thisTitle(res.data._id)
      }
      //console.log(res);
    },
    async tijiao() {
      let content = this.textarea;
      //console.log(content.trim().length);
      let id = this.thisTitleId;
      const { data: res } = await this.$http.post(`books/upcontent/${id}`, {
        content: content,size:content.trim().length
      });
      if (res.status != 200) return this.$message.error("提交失败");
      this.$message.success("提交成功");
    },
    async removeTitle(id) {
      this.$confirm("此操作将永久删除该章节, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.deleteSuccess(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      //const {data:res} = await this.$http.delete(`books/deleteTitle/${id}`)
    },
    async deleteSuccess(id) {
      const { data: res } = await this.$http.delete(`books/deleteTitle/${id}`);
      if (res === "OK") {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.getThisBook();
      }
    },
    changeTitle(id) {
      this.thisTitleId = id;
      this.$prompt("输入新章节名", "更改章节名？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.Promisee(value);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更改",
          });
        });
    },
    async Promisee(value) {
      //更改章节名
      const { data: res } = await this.$http.post(
        `books/changeTitleName/${this.thisTitleId}`,
        { title: value }
      );
      if (res === "OK") {
        this.getThisBook(),
          this.$message({
            type: "success",
            message: "更改成功!",
          });
      }
    },
  },
  created() {
    this.getThisBook();
  },
};
</script>

<style lang="less" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
}
ul {
  display: flex;
  padding: 0;
  flex-direction: column;
  justify-content: center;
}
li {
  list-style: none;
}
.el-main{
  display: flex;
  justify-content: center;
}
.el-textarea {
  width: 60%;
  font-size: 18px;
  font-weight: bold;
  color: red;
}
.title {
  // border-bottom: 1px solid black;
  text-align: center;
  margin-top: 3px;
}
.el-tag {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow: hidden;
}
  .el-tag:hover{
    color: red;
    cursor:pointer
  }
</style>
